<template>
    <div class="main-container">

        <!-- <vab-query-form>
          <vab-query-form-left-panel :span="12">
            <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
              添加
            </el-button>
            <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
              批量删除
            </el-button>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel :span="12">
            <el-form :inline="true" :model="queryForm" @submit.native.prevent>
              <el-form-item>
                <el-input
                  v-model.trim="queryForm.permission"
                  placeholder="请输入查询条件"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">
                  查询
                </el-button>
              </el-form-item>
            </el-form>
          </vab-query-form-right-panel>
        </vab-query-form> -->
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="card" shadow="never">
                    <div slot="header">
                        <span class="tips">角色列表</span>
                        <el-button type="success" class="right" icon="el-icon-plus" @click="handleEdit">新增</el-button>
                    </div>
                    <el-table v-loading="listLoading" :data="list" border :element-loading-text="elementLoadingText"
                        height="calc(100vh - 310px)">
                        <template slot="empty">
                            <el-empty :image-size="200"></el-empty>
                        </template>
                        <el-table-column show-overflow-tooltip label="序号" align="center" width="50px;">
                            <template slot-scope="scope">
                                {{(queryForm.pageNo - 1) * queryForm.pageSize + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="name" label="角色名称" width="200px" align="center">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="description" label="描述"></el-table-column>
                        <el-table-column show-overflow-tooltip label="操作" width="200" align="center">
                            <template #default="{ row }">
                                <el-button size="mini" plain type="primary" @click="handleEdit(row)">编辑</el-button>
                                <el-button size="mini" plain type="danger" @click="handleDelete(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background :current-page="queryForm.pageNo" :page-size="queryForm.pageSize"
                        :layout="layout" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"></el-pagination>
                </el-card>
            </el-col>
        </el-row>
        <edit ref="edit" @fetch-data="fetchData"></edit>
    </div>
</template>

<script>
import { getRolePage, doRoleDelete } from '@/api/role'
import Edit from './components/RoleManagementEdit'

export default {
    name: 'RoleManagement',
    components: { Edit },
    data() {
        return {
            list: null,
            listLoading: true,
            layout: 'total, sizes, prev, pager, next, jumper',
            total: 0,
            selectRows: '',
            elementLoadingText: '正在加载...',
            queryForm: {
                pageNo: 1,
                pageSize: 10,
                name: '',
            },
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        setSelectRows(val) {
            this.selectRows = val
        },
        handleEdit(row) {
            if (row.id) {
                this.$refs['edit'].showEdit(row.id)
            } else {
                this.$refs['edit'].showEdit()
            }
        },
        handleDelete(row) {
            if (row.id) {
                this.$baseConfirm('你确定要删除当前项吗', null, async () => {
                    const { msg } = await doRoleDelete(row.id)
                    console.log('msg',msg);
                    if (msg === '成功'){
                      this.$baseMessage('删除成功', 'success')
                      // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                      const totalPage = Math.ceil((this.total - 1) / this.queryForm.pageSize) // 总页数
                      this.queryForm.pageNo = this.queryForm.pageNo > totalPage ? totalPage : this.queryForm.pageNo
                      this.queryForm.pageNo = this.queryForm.pageNo < 1 ? 1 : this.queryForm.pageNo
                      this.fetchData()
                    }else {
                      this.$baseMessage(msg, 'error')
                    }

                })
            } else {
                // if (this.selectRows.length > 0) {
                //     const ids = this.selectRows.map((item) => item.id).join()
                //     this.$baseConfirm('你确定要删除选中项吗2', null, async () => {
                //         const {msg} = await doRoleDelete(ids)
                //         this.$baseMessage(msg, 'success')
                //         this.fetchData()
                //     })
                // } else {
                //     this.$baseMessage('未选中任何行', 'error')
                //     return false
                // }
            }
        },
        handleSizeChange(val) {
            this.queryForm.pageSize = val
            this.fetchData()
        },
        handleCurrentChange(val) {
            this.queryForm.pageNo = val
            this.fetchData()
        },
        queryData() {
            this.queryForm.pageNo = 1
            this.fetchData()
        },
        async fetchData() {
            this.listLoading = true
            const { data } = await getRolePage(this.queryForm)
            this.list = data.list
            this.total = data.total
            setTimeout(() => {
                this.listLoading = false
            }, 300)
        },
    },
}
</script>
